<script lang="ts" setup>
import { getCurrentInstance, reactive, ref } from "vue";
import { onPageScroll, onReady } from "@dcloudio/uni-app";
import TnTitle from "@tuniao/tnui-vue3-uniapp/components/title/src/title.vue";
import { tnNavPage } from "@tuniao/tnui-vue3-uniapp/utils";
import type { NavbarRectInfo } from "@tuniao/tnui-vue3-uniapp/components/navbar";
import PageContainer from "@/components/page-container/index.vue";
import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
import { useScrollTransparentNavbar } from "@/hooks";
import system from "@/api/system.js";
import { FILE_URL } from "@/api/config.js";

const paging = ref(null);
useZPaging(paging);
// 导航栏的高度
const navbarHeight = ref(0);
const instance = getCurrentInstance();
const state = reactive({
  messageData: [],
});

const { init: initTransparentScroll, opacityScrollHandle } =
  useScrollTransparentNavbar(instance);

// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height;
};

const clickMessage = (jumpLink: string) => {
  // tnNavPage(jumpLink)
  window.FlutterBridge.postMessage(
    JSON.stringify({
      action: "jump",
      data: { scheme: jumpLink },
    })
  );
};

const queryList = (pageNo: any, pageSize: any) => {
  system
    .messages({
      page: pageNo,
      page_size: pageSize,
      type: "like",
    })
    .then((res) => {
      console.log(res.data, "getMessageList");
      paging.value.complete(res.data);
    })
    .catch((err: any) => {
      console.log(err, "getMessageList");
      paging.value.complete(false);
    });
};

onReady(() => {
  initTransparentScroll();
});
onPageScroll((e) => {
  opacityScrollHandle(e.scrollTop);
});
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <!-- <TnNavbar
      fixed
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    >
      赞/喜欢
    </TnNavbar> -->
    <view class="container">
      <!-- 方式1 start-->
      <view class="tn-mt-sm">
        <z-paging
          ref="paging"
          v-model="state.messageData"
          :paging-style="{ paddingTop: `${navbarHeight + 10}px` }"
          :safe-area-inset-bottom="true"
          :use-safe-area-placeholder="true"
          @query="queryList"
        >
          <view class="">
            <view
              v-for="(item, index) in state.messageData"
              :key="index"
              class="tn-flex user-lists"
            >
              <view class="">
                <view class="logo-pic">
                  <view class="logo-image">
                    <view
                      class=""
                      :style="
                        'background-image:url(' +
                        FILE_URL +
                        item.user_avatar +
                        ');width: 80rpx;height: 80rpx;background-size: cover;'
                      "
                    />
                  </view>
                </view>
              </view>
              <view class="tn-pl-sm">
                <view class="tn-flex justify-between">
                  <view class="justify-content-item">
                    <text class="tn-text-lg">{{ item.user_nickname }}</text>
                  </view>
                </view>
                <view
                  class="tn-pt-xs tn-text-ellipsis"
                  style="color: #7d7d7d"
                  @click="clickMessage(item.jump_link)"
                >
                  <text class="tn-text-sm">赞了你的动态</text>
                  <text class="tn-text-sm tn-ml-sm">{{ item.msg_time }}</text>
                  <view class="tn-mt-sm">
                    <TnTitle
                      :title="item.content"
                      size="sm"
                      mode="vLine"
                      color="#080808"
                      assist-color="#ccf2ff"
                    />
                  </view>
                </view>
              </view>
            </view>
          </view>
        </z-paging>
      </view>

      <view class="tn-tabbar-height" />
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
@use "./styles/likelist.scss";
</style>
